<template>
    <div class="wrapper" @click="cateShow = !cateShow">
        <filter-report :visible=true :cateShow="cateShow" :type="4" ></filter-report>

        <el-table :key="1" v-if="tableType == 'department'" :data="tableDept" stripe border >
            <el-table-column prop="name" label="部门" width="140" fixed ></el-table-column>
            <el-table-column prop="callOut" label="呼出总数（次）"></el-table-column>
            <el-table-column prop="callOutAnswer" label="呼出已接（次）"></el-table-column>
            <el-table-column prop="callOutValid" label="有效呼出（次）"></el-table-column>
            <el-table-column prop="callOutLength" label="呼出时长（分钟）"></el-table-column>
            <el-table-column prop="callInLength" label="呼入时长（分钟）"></el-table-column>
            <el-table-column prop="callIn" label="呼入次数"></el-table-column>
            <el-table-column prop="smsTimes" label="短信发送次数"></el-table-column>
        </el-table>

        <el-table :key="2" v-else-if="tableType == 'team'" :data="tableTeam" stripe border>
            <el-table-column prop="teamName" label="部门/团队" width="140" fixed ></el-table-column>
            <el-table-column prop="name" label="销售员">
                <template scope="scope">
                    <span v-if="scope.row.name == '总计'">{{scope.row.name}}</span>
                    <el-button v-else @click="toUserInfo(scope.row)" type="text"><span class="content-link">{{scope.row.name}}</span></el-button>
                </template>
            </el-table-column>
            <el-table-column prop="callOut" label="呼出总数（次）"></el-table-column>
            <el-table-column prop="callOutAnswer" label="呼出已接（次）"></el-table-column>
            <el-table-column prop="callOutValid" label="有效呼出（次）"></el-table-column>
            <el-table-column prop="callOutLength" label="呼出时长（分钟）"></el-table-column>
            <el-table-column prop="callInLength" label="呼入时长（分钟）"></el-table-column>
            <el-table-column prop="callIn" label="呼入次数"></el-table-column>
            <el-table-column prop="smsTimes" label="短信发送次数"></el-table-column>
        </el-table>
        <!-- <el-table :key="3"  v-else-if="tableType == 'person'"  :data="tablePerson" stripe border>
            <el-table-column prop="name" label="销售员"></el-table-column>
            <el-table-column prop="startTime" label="操作时间"></el-table-column>
            <el-table-column prop="callTypeName" label="状态"></el-table-column>
        </el-table> -->

        <el-table :key="3" v-else-if="tableType == 'person'" empty-text="此时间段内，未找到TA的统计数据！" :data="tablePerson" stripe border>
            <el-table-column prop="departmentName" label="部门/团队" width="140" ></el-table-column>
            <el-table-column prop="name" label="销售员"></el-table-column>
            <el-table-column prop="phoneNum" label="手机"></el-table-column>
            <el-table-column prop="startTime" label="操作时间"></el-table-column>
            <el-table-column prop="timeChange" label="呼叫时长"></el-table-column>
            <el-table-column prop="callTypeName" label="状态"></el-table-column>
            <el-table-column prop="content" label="短信内容">
                <template scope="scope">
                    <el-popover
                      placement="bottom"
                      width="150"
                      trigger="click"
                      :content="scope.row.content"
                      >
                        <el-button slot="reference" type="text" style="padding:0"><span v-if="scope.row.content" class="content-link">{{scope.row.content.length>5?scope.row.content.substring(0,5)+'....':scope.row.content}}</span></el-button>
                    </el-popover>
                  </template>
            </el-table-column>
        </el-table>

        <el-row v-if="tableType == 'person'" class="table-paging">
            <el-pagination
                @current-change="onlineCurrentChange"
                @size-change="onlineSizeChange"
                :current-page="onlinePage.pageNum"
                :page-sizes="onlinePage.pageSizes"
                :page-size="onlinePage.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="onlinePage.total">
            </el-pagination>
        </el-row>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import FilterReport from '~components/filterReport.vue'
    import { getCookie } from '~/utils/auth'
    import { getTime,getDate,getYesterday,getSevenDaysBefore } from '~/utils/auth'
    import { Radio, RadioGroup, RadioButton, Table, Pagination,TableColumn,Button,Popover} from 'element-ui'
    Vue.use(Radio);
    Vue.use(RadioGroup);
    Vue.use(RadioButton);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Button);
    Vue.use(Popover);
    Vue.use(Pagination);

    export default {
       components: {
            FilterReport
        },
        head(){
            return {
                title: "在线统计",
                meta: [
                    { hid: 'onlinereport', name: 'onlinereport', content: 'onlinereport'}
                ]
            }
        },
        data () {
            return {
                tabName: '在线统计',
               cateShow:false,
               tableDept : [],
               tableTeam : [],
               tablePerson :[],
               teamName:'',
               userName: "",
               tableType :'',
               filter : {
                    startDate:"",
                    endDate:"",
                    customerlevel: '',//客户类型
                    deptId: '',
                    usId:'',
                    level:'',
                    flag:'',
                    childId:'',
                    moreUser:false
                },
                onlinePage: {
                    pageSizes: [10, 20, 50],    // 每页可选条数列表,
                    pageSize: 50,
                    total: 0,
                    pageNum: 1
                },
            }
        },
        computed: {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            })
        },
        // watch:{
        //     "filter.flag"(){
        //         if(this.filter.flag == 2){
        //             this.tableType = "team"//团队
        //         }else if(this.filter.flag == 1){
        //             this.tableType = "person"//个人
        //         }else if(this.filter.flag == 0){
        //             this.tableType = "department"//部门
        //         }
        //     }
        // },
        methods: {
          toUserInfo(row){
            this.filter.deptId = '';
            this.filter.usId = row.id;
            this.filter.flag = 1;
            this.filter.childId = "";
            this.tableType = "person";
            this.getOnlineList(this.filter);
          },
          getFilterData(data,times){
                let userData = getCookie('userData');
                this.filter.startDate = data.dateRange[0]?getDate(data.dateRange[0]):getDate(new Date());
                this.filter.endDate =  data.dateRange[1]?getDate(data.dateRange[1]):getDate(new Date());
                this.filter.customerlevel = data.customerlevel;
                this.filter.moreUser = data.moreUser;
                this.userName = data.userName;
                    if(data.moreUser){//多选人员时，再转成团队显示
                        this.filter.level = data.level;
                        this.filter.deptId = JSON.parse(userData).departmentId;
                        this.filter.childId = data.usId;
                        this.filter.usId = "";
                        this.filter.flag = 2;
                    }else{
                        this.filter.level = data.level;
                        this.filter.deptId = data.deptId;
                        this.filter.usId = data.usId;
                        this.filter.flag = data.flag;
                        this.filter.childId = "";
                    }
                //}
                if(this.filter.flag == 2){
                    this.tableType = "team"//团队
                }else if(this.filter.flag == 1){
                    this.tableType = "person"//个人
                }else if(this.filter.flag == 0){
                    this.tableType = "department"//部门
                }
                
                this.teamName = data.teamName;

                
                this.getOnlineList(this.filter)
            },
            getOnlineList(filter){
                this.tableDept = [];
                this.tableTeam = [];
                this.tablePerson = [];
                this.tablePersonTotal = [];
                this.$store.dispatch("getOnlineList",filter).then((res)=>{
                    let result = res.data;
                    this.onlinePage.total = result.data.total;
                    if (result && result.data && result.data.list &&result.data.list.length > 0) {
                        if(this.tableType == "department"){
                            let dataList = result.data.list;
                            let deptAll = {
                                callIn:0,
                                callInLength:0,
                                callOut:0,
                                callOutAnswer:0,
                                callOutLength:0,
                                callOutValid:0,
                                id:"",
                                name:"总计",
                                smsTimes:0
                            }
                            for(var i=0; i <dataList.length; i++) {
                                deptAll.callIn += dataList[i].callIn;
                                deptAll.callInLength += dataList[i].callInLength;
                                deptAll.callOut += dataList[i].callOut;
                                deptAll.callOutAnswer += dataList[i].callOutAnswer;
                                deptAll.callOutLength += dataList[i].callOutLength;
                                deptAll.callOutValid += dataList[i].callOutValid;
                                deptAll.smsTimes += dataList[i].smsTimes;
                            }
                            this.tableDept = dataList;
                            this.tableDept.push(deptAll);
                        }else if(this.tableType == "team"){
                            let dataList = result.data.list;
                            let deptAll = {
                                callIn:0,
                                callInLength:0,
                                callOut:0,
                                callOutAnswer:0,
                                callOutLength:0,
                                callOutValid:0,
                                id:"",
                                name:'总计',
                                smsTimes:0
                            }
                            for(var i=0; i <dataList.length; i++) {
                                dataList[i].teamName = this.teamName;
                                deptAll.callIn += dataList[i].callIn;
                                deptAll.callInLength += dataList[i].callInLength;
                                deptAll.callOut += dataList[i].callOut;
                                deptAll.callOutAnswer += dataList[i].callOutAnswer;
                                deptAll.callOutLength += dataList[i].callOutLength;
                                deptAll.callOutValid += dataList[i].callOutValid;
                                deptAll.smsTimes += dataList[i].smsTimes;
                            }
                            this.tableTeam = dataList;
                            this.tableTeam.push(deptAll);
                        }else if(this.tableType == "person"){
                            let list = result.data.list;
                            for(let i=0; i<list.length; i++){
                                list[i].departmentName = list[i].departmentName || this.teamName;
                                list[i].content = list[i].content;
                            }
                            this.tablePersonTotal = list;
                            this.tablePerson = this.tablePersonTotal.slice(0,this.onlinePage.pageSize);
                        }
                    }
                })
            },
            // 弹框销售员列表选择分页size
            onlineCurrentChange(val) {
                let start = this.onlinePage.pageSize*(val-1);
                let end = this.onlinePage.pageSize*val;
                this.tablePerson = this.tablePersonTotal.slice(start,end);
                //this.tablePerson = this.tablePersonTotal.splice(0,10)
            },
            onlineSizeChange(val) {
                this.onlinePage.pageSize = val;
                val = this.tablePersonTotal.length >val?val: this.tablePersonTotal.length;
                this.tablePerson = this.tablePersonTotal.slice(0,val);
            },
        },
        created () {
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        }
    }

</script>

<style scoped lang="scss">
  .wrapper{
    min-height: 500px;
  }
  .content-link{
    color: #20A0FF;
    cursor: pointer;
  }
  .table-paging{
    margin-top: 15px;
  }
</style>